<template>
  <Layout :class="['m-platform']">
    <MHeader />
    <MSider />
    <Layout class="m-container">
      <MBreadcrumb />
      <Layout class="m-scroll-container">
        <router-view></router-view>
      </Layout>
    </Layout>
  </Layout>
</template>

<script>
import { Layout } from "ant-design-vue";
import MSider from "@/components/MSider/index";
import MBreadcrumb from "@/components/MBreadcrumb/index";
import Header from "@/components/Header/index";

export default {
  name: "m-platform",
  components: { MSider, MBreadcrumb, Layout, MHeader: Header },
};
</script>

<style lang="less" scoped>
.m-platform {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  justify-content: space-between;
  flex-direction: row;
  flex: auto;
  background: #f2f6ff;
  overflow: hidden;
  padding-top: 50px;
  .m-container {
    padding: 10px 20px 20px;
    background-color: #f6f6f6;
    .m-scroll-container {
      padding: 20px 20px;
      background: #fff;
      background-color: #fff;
      overflow: auto;
    }
  }
}
</style>
